import { useState } from 'react';
import { Header } from '../components/Header';
import { Footer } from '../components/Footer';
import PageHeader from '../components/PageHeader';
import { useDocumentTitle } from '../hooks/useDocumentTitle';
import { Star, Filter, ChevronLeft, ChevronRight } from 'lucide-react';

export const ReviewsPage = () => {
  useDocumentTitle('Product Reviews');
  
  const [activeFilter, setActiveFilter] = useState('all');
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 6;
  
  const reviews = [{
    image: 'https://picsum.photos/600/400?random=20',
    title: 'Best Blood Glucose Monitors of 2025',
    excerpt: 'Our experts tested the top glucose monitors for accuracy, ease of use, and data management.',
    category: 'Diabetes Care',
    rating: 4.8,
    date: 'Updated January 2025',
    slug: 'best-blood-glucose-monitors-2025'
  }, {
    image: 'https://picsum.photos/600/400?random=21',
    title: 'Top 5 Blood Pressure Monitors for Home Use (2025)',
    excerpt: 'Find the perfect blood pressure monitor with our comprehensive testing and comparison.',
    category: 'Heart Health',
    rating: 4.9,
    date: 'Updated February 2025',
    slug: 'top-blood-pressure-monitors-2025'
  }, {
    image: 'https://picsum.photos/600/400?random=22',
    title: 'Best Heating Pads for Arthritis Pain Relief (2025)',
    excerpt: 'Our top picks for heating pads that provide effective relief for arthritis symptoms.',
    category: 'Pain Management',
    rating: 4.7,
    date: 'Updated March 2025',
    slug: 'best-heating-pads-arthritis-2025'
  }, {
    image: 'https://picsum.photos/600/400?random=23',
    title: "2025's Top Rated Nebulizers for Home Treatment",
    excerpt: 'We tested the latest nebulizers for efficiency, noise level, and ease of cleaning.',
    category: 'Respiratory Care',
    rating: 4.6,
    date: 'Updated April 2025',
    slug: 'top-rated-nebulizers-2025'
  }, {
    image: 'https://picsum.photos/600/400?random=24',
    title: 'Best Walking Aids and Rollators of 2025',
    excerpt: 'Our comprehensive review of mobility aids for different needs and environments.',
    category: 'Mobility Assistance',
    rating: 4.8,
    date: 'Updated May 2025',
    slug: 'best-walking-aids-rollators-2025'
  }, {
    image: 'https://picsum.photos/600/400?random=25',
    title: '2025 Guide to the Best Pulse Oximeters',
    excerpt: 'We tested the accuracy and reliability of the top pulse oximeters on the market.',
    category: 'Respiratory Care',
    rating: 4.7,
    date: 'Updated June 2025',
    slug: 'best-pulse-oximeters-guide-2025'
  }, {
    image: 'https://picsum.photos/600/400?random=26',
    title: 'Best Digital Thermometers for Home Use (2025)',
    excerpt: 'Accurate and reliable thermometers for monitoring health at home.',
    category: 'Heart Health',
    rating: 4.6,
    date: 'Updated July 2025',
    slug: 'best-digital-thermometers-2025'
  }, {
    image: 'https://picsum.photos/600/400?random=27',
    title: 'Top Smart Scales for Health Tracking (2025)',
    excerpt: 'Smart scales that help you monitor your health metrics effectively.',
    category: 'Heart Health',
    rating: 4.5,
    date: 'Updated August 2025',
    slug: 'top-smart-scales-2025'
  }, {
    image: 'https://picsum.photos/600/400?random=28',
    title: 'Best CPAP Machines for Sleep Apnea (2025)',
    excerpt: 'Comprehensive review of CPAP machines for better sleep quality.',
    category: 'Respiratory Care',
    rating: 4.8,
    date: 'Updated September 2025',
    slug: 'best-cpap-machines-2025'
  }, {
    image: 'https://picsum.photos/600/400?random=29',
    title: 'Best Compression Socks for Health (2025)',
    excerpt: 'Effective compression socks for circulation and comfort.',
    category: 'Pain Management',
    rating: 4.4,
    date: 'Updated August 2025',
    slug: 'best-compression-socks-2025'
  }, {
    image: 'https://picsum.photos/600/400?random=30',
    title: 'Top Pill Organizers and Dispensers (2025)',
    excerpt: 'Smart pill organizers to help manage your medications effectively.',
    category: 'Diabetes Care',
    rating: 4.6,
    date: 'Updated July 2025',
    slug: 'top-pill-organizers-2025'
  }, {
    image: 'https://picsum.photos/600/400?random=31',
    title: 'Best Electric Wheelchairs of 2025',
    excerpt: 'Feature-rich electric wheelchairs for enhanced mobility and independence.',
    category: 'Mobility Assistance',
    rating: 4.7,
    date: 'Updated June 2025',
    slug: 'best-electric-wheelchairs-2025'
  }, {
    image: 'https://picsum.photos/600/400?random=32',
    title: 'Best Massage Chairs for Pain Relief (2025)',
    excerpt: 'Therapeutic massage chairs that provide effective pain relief at home.',
    category: 'Pain Management',
    rating: 4.5,
    date: 'Updated May 2025',
    slug: 'best-massage-chairs-2025'
  }, {
    image: 'https://picsum.photos/600/400?random=33',
    title: 'Top Air Purifiers for Allergies (2025)',
    excerpt: 'High-performance air purifiers to improve indoor air quality.',
    category: 'Respiratory Care',
    rating: 4.6,
    date: 'Updated April 2025',
    slug: 'top-air-purifiers-allergies-2025'
  }, {
    image: 'https://picsum.photos/600/400?random=34',
    title: 'Best Insulin Pens and Injectors (2025)',
    excerpt: 'Advanced insulin delivery systems for better diabetes management.',
    category: 'Diabetes Care',
    rating: 4.8,
    date: 'Updated March 2025',
    slug: 'best-insulin-pens-2025'
  }];
  const categories = [{
    id: 'all',
    name: 'All Reviews'
  }, {
    id: 'heart-health',
    name: 'Heart Health'
  }, {
    id: 'diabetes-care',
    name: 'Diabetes Care'
  }, {
    id: 'respiratory-care',
    name: 'Respiratory Care'
  }, {
    id: 'pain-management',
    name: 'Pain Management'
  }, {
    id: 'mobility-assistance',
    name: 'Mobility'
  }];
  
  const filteredReviews = activeFilter === 'all' ? reviews : reviews.filter(review => review.category.toLowerCase().replace(' ', '-') === activeFilter);
  
  // Pagination logic
  const totalPages = Math.ceil(filteredReviews.length / itemsPerPage);
  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  const paginatedReviews = filteredReviews.slice(startIndex, endIndex);
  
  // Reset to page 1 when filter changes
  const handleFilterChange = (filter: string) => {
    setActiveFilter(filter);
    setCurrentPage(1);
  };
  
  const goToPage = (page: number) => {
    setCurrentPage(page);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };
  return <div className="flex flex-col min-h-screen w-full bg-white">
      <Header />
      <main className="flex-grow">
        <PageHeader 
          title="Product Reviews"
          subtitle="Honest, thorough reviews of healthcare products tested by our expert team"
          icon={Star}
        />
        <div className="py-16 bg-white">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8">
              <h2 className="text-2xl font-bold text-[#0e4c92] mb-4 sm:mb-0">
                Latest Reviews
              </h2>
              <div className="flex items-center">
                <Filter className="h-5 w-5 text-gray-500 mr-2" />
                <div className="flex flex-wrap gap-2">
                  {categories.map(category => <button key={category.id} onClick={() => handleFilterChange(category.id)} className={`px-3 py-1 text-sm rounded-full ${activeFilter === category.id ? 'bg-[#0e4c92] text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`}>
                      {category.name}
                    </button>)}
                </div>
              </div>
            </div>
            <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
              {paginatedReviews.map((review, index) => <div key={index} className="flex flex-col overflow-hidden rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300">
                  <div className="flex-shrink-0">
                    <img className="h-48 w-full object-cover" src={review.image} alt={review.title} />
                  </div>
                  <div className="flex-1 bg-white p-6 flex flex-col justify-between">
                    <div className="flex-1">
                      <div className="flex justify-between">
                        <p className="text-sm font-medium text-[#5cb8b2]">
                          {review.category}
                        </p>
                        <div className="flex items-center">
                          <Star className="h-4 w-4 text-yellow-400 fill-current" />
                          <span className="ml-1 text-sm font-medium text-gray-700">
                            {review.rating}
                          </span>
                        </div>
                      </div>
                      <h3 className="mt-2 text-xl font-semibold text-[#0e4c92]">
                        {review.title}
                      </h3>
                      <p className="mt-3 text-gray-600 line-clamp-2">
                        {review.excerpt}
                      </p>
                      <p className="mt-3 text-xs text-gray-500">
                        {review.date}
                      </p>
                    </div>
                    <div className="mt-6">
                      <a href={`/reviews/${review.slug}`} className="text-[#ff8c7a] font-medium">
                        Read Full Review →
                      </a>
                    </div>
                  </div>
                </div>)}
            </div>
            {/* Pagination */}
            {totalPages > 1 && (
              <div className="mt-12 flex justify-center">
                <nav className="flex items-center space-x-2">
                  {/* Previous Button */}
                  <button
                    onClick={() => goToPage(currentPage - 1)}
                    disabled={currentPage === 1}
                    className={`px-3 py-2 rounded-md ${
                      currentPage === 1
                        ? 'text-gray-400 cursor-not-allowed'
                        : 'text-[#0e4c92] hover:bg-[#f5f7fa] transition-colors'
                    }`}
                  >
                    <ChevronLeft className="h-5 w-5" />
                  </button>
                  
                  {/* Page Numbers */}
                  {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
                    <button
                      key={page}
                      onClick={() => goToPage(page)}
                      className={`px-4 py-2 rounded-md transition-colors ${
                        currentPage === page
                          ? 'bg-[#0e4c92] text-white'
                          : 'text-[#0e4c92] hover:bg-[#f5f7fa]'
                      }`}
                    >
                      {page}
                    </button>
                  ))}
                  
                  {/* Next Button */}
                  <button
                    onClick={() => goToPage(currentPage + 1)}
                    disabled={currentPage === totalPages}
                    className={`px-3 py-2 rounded-md ${
                      currentPage === totalPages
                        ? 'text-gray-400 cursor-not-allowed'
                        : 'text-[#0e4c92] hover:bg-[#f5f7fa] transition-colors'
                    }`}
                  >
                    <ChevronRight className="h-5 w-5" />
                  </button>
                </nav>
              </div>
            )}
            
            {/* Results Info */}
            <div className="mt-6 text-center text-sm text-gray-600">
              Showing {startIndex + 1}-{Math.min(endIndex, filteredReviews.length)} of {filteredReviews.length} reviews
            </div>
          </div>
        </div>
      </main>
      <Footer />
    </div>;
};